/**
 * @description: 弹性盒子（传入null不设置该属性）
 * @Author: liuxin
 */
@mixin flex-box($direction: row, $justify: null, $align: null, $flex-wrap: null) {
    display: flex;
    @if ($direction!=null) {
        flex-direction: $direction;
    }
    @if ($justify!=null) {
        justify-content: $justify;
    }
    @if ($align!=null) {
        align-items: $align;
    }
    @if ($flex-wrap != null) {
        flex-wrap: $flex-wrap;
    }
}

/**
 * @description: 绝对定位  参数顺序：上右下左
 * @Author: liuxin
 */
@mixin position-absolute($top: null, $right: null, $bottom: null, $left: null) {
    position: absolute;
    @if ($left!= "" & & $left!=null) {
        left: $left;
    }
    @if ($right!= "" & & $right!=null) {
        right: $right;
    }
    @if ($top!= "" & & $top!=null) {
        top: $top;
    }
    @if ($bottom!= "" & & $bottom!=null) {
        bottom: $bottom;
    }
}

/**
 * @description: 左浮动
 * @Author: liuxin
 */
@mixin float-left($width: 19%, $margin-right: 1.2%) {
    width: $width;
    float: left;
    @if ($margin-right!=null) {
        margin-right: $margin-right;
    }
}

/**
 * @description: 右浮动
 * @Author: liuxin
 */
@mixin float-Right($width: 19%, $margin-left: 1.2%) {
    width: $width;
    float: right;
    @if ($margin-left!=null) {
        margin-left: $margin-left;
    }
}

/**
 * @description: 渐变(从上到下）
 * @Author: liuxin
 */
@mixin linear-gradient($direction: bottom, $color1: transparent, $color2: #306eff, $color3: transparent) {
    //background: -webkit-linear-gradient($direction,$colorTop, $colorCenter, $colorBottom); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient($direction, $color1, $color2, $color3); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient($direction, $color1, $color2, $color3); /* Firefox 3.6 - 15 */
    background: linear-gradient(to $direction, $color1, $color2, $color3); /* 标准的语法 */
}

/**
 * @description: 行高
 * @Author: liuxin
 */
@mixin line-height($height: 30px, $line-height: 30px) {
    @if ($height != null) {
        height: $height;
    }
    @if ($line-height!=null) {
        line-height: $line-height;
    }
}

/**
 * @description: 画三角形
 * @Author: liuxin
 */
@mixin triangle($width: 10px, $direction: top, $color: $bgBlueLight) {
    border: $width solid transparent;
    @if ($direction == top) {
        // 上三角
        border-bottom-color: $color;
    }
    @if ($direction == bottom) {
        // 下三角
        border-top-color: $color;
    }
    @if ($direction == left) {
        // 左三角
        border-right-color: $color;
    }
    @if ($direction == right) {
        // 右三角
        border-left-color: $color;
    }
}

/**
 * @description: 文本阴影
 * @Author: liuxin
 */
@mixin text-show($h-shadow: 0px, $v-shadow: 0px, $blur: 10px, $color: rgba(0, 180, 255, 0.7)) {
    text-shadow: $h-shadow $v-shadow $blur $color;
}

/**
 * @description: 链接样式
 * @Author: liuxin
 */
@mixin hover-style(
    $style: (
        color: #d9fdff,
    ),
    $hoverStyle: (
        color: #306eff,
    )
) {
    text-decoration: none;
    @each $key, $value in $style {
        #{$key}: #{$value};
    }
    @if ($hoverStyle!=null & & $hoverStyle!= "") {
        &:hover {
            @each $key, $value in $hoverStyle {
                #{$key}: #{$value};
            }
        }
    }
}

/**
 * @description: 定义滚动条样式 圆角和阴影不需要则传入null
 * @Author: liuxin
 */
@mixin scrollBar($width: 10px, $height: 10px, $outColor: $bgColor, $innerColor: $bgGrey, $radius: 5px, $shadow: null) {
    /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
    &::-webkit-scrollbar {
        width: $width;
        height: $height;
        background-color: $outColor;
    }

    /*定义滚动条轨道 内阴影+圆角*/
    &::-webkit-scrollbar-track {
        @if ($shadow!=null) {
            -webkit-box-shadow: $shadow;
        }
        @if ($radius!=null) {
            border-radius: $radius;
        }
        background-color: $outColor;
    }

    /*定义滑块 内阴影+圆角*/
    &::-webkit-scrollbar-thumb {
        @if ($shadow!=null) {
            -webkit-box-shadow: $shadow;
        }
        @if ($radius!=null) {
            border-radius: $radius;
        }
        background-color: $innerColor;
        border: 1px solid $innerColor;
    }
}

/**
 * @description: css3动画 默认3s宽度到200px
 * @return {*}
 * @Author: liuxin
 */
@mixin animation(
    $from: (
        width: 0px,
    ),
    $to: (
        width: 200px,
    ),
    $name: mymove,
    $animate: mymove 2s 1 linear infinite
) {
    -webkit-animation: $animate;
    -o-animation: $animate;
    animation: $animate;
    @keyframes #{$name} {
        from {
            @each $key, $value in $from {
                #{$key}: #{$value};
            }
        }
        to {
            @each $key, $value in $to {
                #{$key}: #{$value};
            }
        }
    }

    @-webkit-keyframes #{$name} {
        from {
            @each $key, $value in $from {
                $key: $value;
            }
        }
        to {
            @each $key, $value in $to {
                $key: $value;
            }
        }
    }
}

/**
 * @description: 圆形盒子
 * @Author: liuxin
 */
@mixin circle($size: 11px, $bg: #fff) {
    border-radius: 50%;
    width: $size;
    height: $size;
    line-height: $size;
    text-align: center;
    background: $bg;
}

/**
 * @description: placeholder提示人不如你
 * @Author: liuxin
 */
@mixin placeholder($color: #bbb) {
    // Firefox
    &::-moz-placeholder {
        color: $color;
        opacity: 1;
    }
    // Internet Explorer 10+
    &:-ms-input-placeholder {
        color: $color;
    }
    // Safari and Chrome
    &::-webkit-input-placeholder {
        color: $color;
    }

    &:placeholder-shown {
        text-overflow: ellipsis;
    }
}
